<template>
<div class="content-body">
  <div class="selecter">
    <div class="block">
            <el-date-picker
              v-model="value3"
              type="year"
              placeholder="年">
            </el-date-picker>
        </div>
        <el-select v-model="monthsvalue" placeholder="月" class="options months">
            <el-option
              v-for="item in months"
              :key="item"
              :label="item+' 月'"
              :value="item">
            </el-option>
       </el-select>
        <el-select v-model="artclieType" placeholder="文章类型" class="options type">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
       </el-select>
       <el-input placeholder="请输入关键字" class="search"></el-input>
       <el-button type="danger" plain id="search">搜索</el-button>
  </div>
  <div class="articles">
    <el-empty description="空空如也" v-show="!article.length">
    <a href="/publish.html">
      <el-button type="danger" class="publishArticle">写博客</el-button>
    </a>
    </el-empty>
    <div class="article" v-for="item in article" :key="item.articleId" v-show="article.length">
      <div class="titleAndTime">
        <p style="flex-grow: 1;"><a href="">{{item.title}}</a></p>
        <p style="opacity: 0.5;">{{item.createTime}}</p>
      </div>
      <div class="launchType" style="margin: 15px 0px;opacity: 0.6;">
        <p style="color: black;" v-show="item.isrelease==1">草稿</p>
        <p style="color: green;" v-show="item.isrelease==0">已发布</p>
      </div>
      <div class="articleDetail">
        <p style="flex-grow: 1;opacity: 0.5;">阅读 · 评论 · 收藏</p>
         <p>
          <a :href="'/publish.html?articleid='+item.articleId">编辑</a>
          <a :href="'/articleDetail.html?articleid='+item.articleId" target="_blank">浏览</a>
          <a href="javascript:;" @click="TdeleteArticle(item.articleId)">删除</a>
        </p>
      </div>

    </div>

  </div>
</div>
</template>

<script>
import {getAllArticles} from "@/api/article"
import {deleteArticle} from "@/api/article"
export default {
     name:"ContentMagArt",
     data() {
        return {
            artclieType:"",
            monthsvalue:"",
            value3:"",
            value2:"",
        options: [{
          value: '选项1',
          label: '不限类型'
        }, {
          value: '选项2',
          label: '原创'
        },
        {
          value: '选项3',
          label: '转载'
        },
        {
          value: '选项4',
          label: '翻译'
        },
      ],
      months:['不限',1,2,3,4,5,6,7,8,9,10,11,12] ,
      article:[
        {articleId:null,title:null,createTime:null,isrelease:null},
       
      ],
        }
     },
      methods: {
        TdeleteArticle(articleId){
          this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          deleteArticle(articleId);

          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
       

       
          
         
         

        }
      },
     mounted(){
      getAllArticles().then(ArticlesList=>{
           this.article=ArticlesList;
          //  console.log(ArticlesList);
              
           });;
     }
}
</script>

<style scoped>
a{
  text-decoration: none;
  color: black;
}
a:hover{
  color: rgb(227, 38, 9);
}
.content-body{
    width: 100%;
    height: 100%;
}
.selecter{
    width: 100%;
    height: 60px;
}
.articles{
    width: 98%;
    /* height: 100%; */
    /* border: 1px solid black; */
}
.block{
  float: left;
}
.el-date-editor.el-input, .el-date-editor.el-input__inner {
  width: 100px;
  height: 20px;
  margin-right: 20px;
  
}
.options{
  position: absolute;
  left: 250px;
}
.months{
  left: 100px;
  width: 80px;
  margin-left: 20px;
}
.search{
  float: left; 
   width: 200px;
   position: absolute;
   left: 500px;
}
#search{
  position: absolute;
  left: 730px;
}
.article{
  height: 80px;
  width: 100%;
  /* border: 1px solid red; */
  /* display: flex; */
  padding: 10px 0px;
  font-size: small;
  border-bottom:1px solid rgb(0, 0, 0,0.1) ;
  margin: 10px 0px;
}
.titleAndTime{
  display: flex;
}
.articleDetail{
  display: flex;
}
.articleDetail a{
  margin-left: 10px;
}


</style>